<template>
  <view class="feedback-page">
    <!-- 反馈标题 -->
    <view class="feedback-title">提交反馈</view>
    
    <!-- 反馈人姓名 -->
    <view class="feedback-input-section">
      <view class="label required">反馈人姓名</view>
      <input 
        type="text" 
        v-model="feedbackData.name"
        placeholder="请输入您的姓名" 
        maxlength="10"
        class="input"
      />
    </view>
    
    <!-- 反馈标题输入 -->
    <view class="feedback-input-section">
      <view class="label required">反馈标题</view>
      <input 
        type="text" 
        v-model="feedbackData.title"
        placeholder="请输入标题 (5-20字)" 
        maxlength="20"
        class="input"
      />
      <text class="word-count">{{ feedbackData.title.length }}/20</text>
    </view>
    
    <!-- 反馈内容输入 -->
    <view class="feedback-input-section">
      <view class="label required">反馈内容</view>
      <textarea 
        v-model="feedbackData.content"
        placeholder="请详细描述您的问题或建议，以便我们能更好地为您解决 (10-500字)" 
        maxlength="500"
        class="textarea"
      ></textarea>
      <text class="word-count">{{ feedbackData.content.length }}/500</text>
    </view>
    
    <!-- 相关图片上传 -->
    <view class="feedback-input-section">
      <view class="label">相关图片</view>
      <view class="upload-tip">支持jpg、png格式，单张不超过5MB，最多上传3张</view>
      <view class="upload-area">
        <view class="image-list">
          <view 
            class="image-item" 
            v-for="(image, index) in feedbackData.images" 
            :key="index"
          >
            <image :src="image" mode="aspectFill"></image>
            <view class="delete-btn" @tap.stop="deleteImage(index)">
              <text class="iconfont">&#xe60e;</text>
            </view>
          </view>
        </view>
        <view 
          class="upload-btn" 
          v-if="feedbackData.images.length < 3"
          @tap="chooseImage"
        >
          <text class="iconfont">&#xe654;</text>
          <text class="upload-text">上传图片</text>
        </view>
      </view>
    </view>
    
    <!-- 联系方式 -->
    <view class="feedback-input-section">
      <view class="label">联系方式（选填）</view>
      <input 
        type="text" 
        v-model="feedbackData.contact"
        placeholder="方便我们与您联系" 
        class="input"
      />
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-btn" :class="{'active': isFormValid}" @tap="submitFeedback">
      <text>提交反馈</text>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';

// 反馈数据
const feedbackData = reactive({
  name: '',
  title: '',
  content: '',
  images: [],
  contact: ''
});

// 表单验证
const isFormValid = computed(() => {
  return feedbackData.name && 
         feedbackData.title.length >= 5 && 
         feedbackData.title.length <= 20 && 
         feedbackData.content.length >= 10 && 
         feedbackData.content.length <= 500;
});

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 3 - feedbackData.images.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      // 检查文件大小
      const files = res.tempFiles;
      const validFiles = files.filter(file => file.size <= 5 * 1024 * 1024);
      
      if (validFiles.length !== files.length) {
        uni.showToast({
          title: '部分图片超过5MB限制',
          icon: 'none'
        });
      }
      
      // 添加有效的图片
      feedbackData.images.push(...validFiles.map(file => file.path));
    },
    fail: () => {
      uni.showToast({
        title: '选择图片失败',
        icon: 'none'
      });
    }
  });
};

// 删除图片
const deleteImage = (index) => {
  feedbackData.images.splice(index, 1);
};

// 提交反馈
const submitFeedback = () => {
  if (!isFormValid.value) {
    if (!feedbackData.name) {
      return uni.showToast({
        title: '请输入反馈人姓名',
        icon: 'none'
      });
    }
    
    if (feedbackData.title.length < 5 || feedbackData.title.length > 20) {
      return uni.showToast({
        title: '标题长度需在5-20字之间',
        icon: 'none'
      });
    }
    
    if (feedbackData.content.length < 10 || feedbackData.content.length > 500) {
      return uni.showToast({
        title: '内容长度需在10-500字之间',
        icon: 'none'
      });
    }
  }
  
  // TODO: 提交反馈数据到服务器
  console.log('提交反馈:', feedbackData);
  
  // 模拟提交
  uni.showLoading({
    title: '提交中...'
  });
  
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '提交成功',
      icon: 'success',
      duration: 2000,
      success: () => {
        setTimeout(() => {
          uni.navigateBack();
        }, 2000);
      }
    });
  }, 1500);
};
</script>

<style lang="scss">
.feedback-page {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 20px;
  box-sizing: border-box;
  
  .feedback-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
  }
  
  .feedback-input-section {
    background-color: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    
    .label {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-bottom: 12px;
      
      &.required:after {
        content: '*';
        color: #ff6b6b;
        margin-left: 4px;
      }
    }
    
    .input {
      width: 100%;
      height: 44px;
      background-color: #f8f8f8;
      border-radius: 8px;
      padding: 0 15px;
      font-size: 15px;
      color: #333;
      border: 1px solid #eee;
      box-sizing: border-box;
      
      &:focus {
        border-color: #2c7873;
      }
    }
    
    .textarea {
      width: 100%;
      height: 150px;
      background-color: #f8f8f8;
      border-radius: 8px;
      padding: 12px 15px;
      font-size: 15px;
      color: #333;
      border: 1px solid #eee;
      box-sizing: border-box;
      line-height: 1.5;
      
      &:focus {
        border-color: #2c7873;
      }
    }
    
    .word-count {
      font-size: 12px;
      color: #999;
      text-align: right;
      margin-top: 8px;
      display: block;
    }
    
    .upload-tip {
      font-size: 12px;
      color: #999;
      margin-bottom: 12px;
    }
    
    .upload-area {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      
      .image-list {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }
      
      .image-item {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        
        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .delete-btn {
          position: absolute;
          top: 4px;
          right: 4px;
          width: 20px;
          height: 20px;
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          
          .iconfont {
            font-size: 12px;
            color: #fff;
          }
        }
      }
      
      .upload-btn {
        width: 80px;
        height: 80px;
        background-color: #f8f8f8;
        border-radius: 8px;
        border: 1px dashed #ddd;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        .iconfont {
          font-size: 24px;
          color: #999;
          margin-bottom: 4px;
        }
        
        .upload-text {
          font-size: 12px;
          color: #999;
        }
        
        &:active {
          background-color: #f0f0f0;
        }
      }
    }
  }
  
  .submit-btn {
    width: 100%;
    height: 50px;
    background: linear-gradient(135deg, #419b94, #2c7873);
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    opacity: 0.6;
    transition: all 0.3s ease;
    
    &.active {
      opacity: 1;
      box-shadow: 0 4px 12px rgba(44, 120, 115, 0.2);
      
      &:active {
        transform: translateY(2px);
        box-shadow: 0 2px 6px rgba(44, 120, 115, 0.2);
      }
    }
    
    text {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
    }
  }
}
</style> 